<template>
  <a-breadcrumb style="font-size: 18px; font-weight: bold; margin-bottom: 20px">
    <a-breadcrumb-item style="">库存管理</a-breadcrumb-item>
    <a-breadcrumb-item style="">进货信息</a-breadcrumb-item>
  </a-breadcrumb>

  <a-button
    type="primary"
    @click="openAdd"
    ghost
    style="margin: -30px 20px 10px 10px; font-size: 20px; float: right"
    >新增</a-button
  >
  <a-button
    type="primary"
    @click="showDrawer"
    style="margin: -30px 20px 10px 10px; font-size: 20px; float: right"
  >
    查询
  </a-button>

  <a-table
    :dataSource="page.list"
    :columns="columns"
    :pagination="pagination"
    @change="handleTableChange"
    bordered
  >
    <!-- 插入名称为id的插槽 -->
    <template #id="{ text }"> 编号：{{ text }} </template>

    <!-- 插入名称为unit的插槽 -->
    <template #unit="{ text }"> {{ text }} 元 </template>

    <template #action="{ record }">
      <a-button type="primary" @click="openUpd(record)">修改</a-button>
      <a-divider type="vertical" />
      <a-button type="danger" @click="purchDel(record.im_id)">删除</a-button>
    </template>
  </a-table>

  <!--新增窗口 -->
  <a-modal v-model:visible="visible" title="增添进货订单" @ok="purchAdd">
    <a-form
      :model="addObj"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 14 }"
      :rules="rules"
      ref="checkdata"
    >
      <a-form-item label="货物名称" name="ca_name">
        <!-- <a-input v-model:value="addObj.ca_id" /> -->
        <a-select
          v-model:value="addObj.ca_name"
          show-search
          style="width: 276px"
          :filter-option="filterOption"
          @focus="handleFocus"
          @blur="handleBlur"
          @change="handleChange"
        >
          <a-select-option v-for="cargo in cargoMap" :key="cargo.ca_name">{{
            cargo.ca_name
          }}</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="供应商名称" name="su_name">
        <!-- <a-input v-model:value="addObj.su_id" /> -->
        <a-select
          v-model:value="addObj.su_name"
          show-search
          style="width: 276px"
          :filter-option="filterOption"
          @focus="handleFocus"
          @blur="handleBlur"
          @change="handleChange"
        >
          <a-select-option
            v-for="supplier in supplierMap"
            :key="supplier.su_name"
            >{{ supplier.su_name }}</a-select-option
          >
        </a-select>
      </a-form-item>

      <a-form-item label="数量" name="im_num">
        <a-input v-model:value="addObj.im_num" />
      </a-form-item>

      <a-form-item label="进价" name="im_price">
        <a-input v-model:value="addObj.im_price" />
      </a-form-item>

      <a-form-item label="进货日期" name="im_day">
        <input
          type="date"
          class="form-control"
          style="width: 275px"
          v-model="addObj.im_day"
        />
      </a-form-item>

      <a-form-item label="生产日期" name="im_date">
        <input
          type="date"
          class="form-control"
          style="width: 275px"
          v-model="addObj.im_date"
        />
      </a-form-item>

      <a-form-item :wrapper-col="{ span: 14, offset: 4 }"> </a-form-item>
    </a-form>
  </a-modal>

  <!--修改窗口 -->
  <a-modal v-model:visible="visible2" title="增添进货订单" @ok="purchUpd">
    <a-form
      :model="updObj"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 14 }"
    >
      <a-form-item label="进货编号">
        <a-input v-model:value="updObj.im_id" disabled />
      </a-form-item>

      <a-form-item label="货物名称">
        <!-- <a-input v-model:value="updObj.ca_id" /> -->
        <a-select
          v-model:value="updObj.ca_name"
          show-search
          style="width: 276px"
          :filter-option="filterOption"
          @focus="handleFocus"
          @blur="handleBlur"
          @change="handleChange"
        >
          <a-select-option v-for="cargo in cargoMap" :key="cargo.ca_name">{{
            cargo.ca_name
          }}</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="货物供应商">
        <!-- <a-input v-model:value="updObj.su_id" /> -->
        <a-select
          v-model:value="updObj.su_name"
          show-search
          style="width: 276px"
          :filter-option="filterOption"
          @focus="handleFocus"
          @blur="handleBlur"
          @change="handleChange"
        >
          <a-select-option
            v-for="supplier in supplierMap"
            :key="supplier.su_name"
            >{{ supplier.su_name }}</a-select-option
          >
        </a-select>
      </a-form-item>

      <a-form-item label="数量">
        <a-input v-model:value="updObj.im_num" />
      </a-form-item>

      <a-form-item label="进价">
        <a-input v-model:value="updObj.im_price" />
      </a-form-item>

      <a-form-item label="进货日期" name="dateTime">
        <input
          type="date"
          class="form-control"
          style="width: 200px"
          v-model="updObj.im_day"
        />
      </a-form-item>

      <a-form-item label="生产日期" name="dateTime">
        <input
          type="date"
          class="form-control"
          style="width: 200px"
          v-model="updObj.im_date"
        />
      </a-form-item>

      <a-form-item :wrapper-col="{ span: 14, offset: 4 }"> </a-form-item>
    </a-form>
  </a-modal>

  <!-- 查询弹窗 -->
  <a-drawer
    title="查询进货信息"
    :width="720"
    :visible="visible3"
    :body-style="{ paddingBottom: '80px' }"
    @close="onClose"
  >
    <a-form :model="query" layout="vertical">
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="进货编号">
            <a-input v-model:value="query.im_id" placeholder="请输入进货编号" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="货物名称">
            <!-- <a-input v-model:value="query.ca_id" placeholder="请输入货物编号" /> -->
            <a-select
              v-model:value="query.ca_name"
              show-search
              style="width: 328px"
              :filter-option="filterOption"
              @focus="handleFocus"
              @blur="handleBlur"
              @change="handleChange"
            >
              <a-select-option v-for="cargo in cargoMap" :key="cargo.ca_name">{{
                cargo.ca_name
              }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="供货商名称">
            <!-- <a-input
              v-model:value="query.su_id"
              placeholder="请输入供货商编号"
            /> -->
            <a-select
              v-model:value="query.su_name"
              show-search
              style="width: 328px"
              :filter-option="filterOption"
              @focus="handleFocus"
              @blur="handleBlur"
              @change="handleChange"
              placeholder="请选择供货商"
            >
              <a-select-option
                v-for="supplier in supplierMap"
                :key="supplier.su_name"
                >{{ supplier.su_name }}</a-select-option
              >
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="数量">
            <a-input v-model:value="query.im_num" placeholder="请输入数量" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="价格">
            <a-input
              v-model:value="query.im_price"
              placeholder="请输入精确价格"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="价格区间">
            <a-input
              v-model:value="query.im_price_start"
              placeholder="请输入起始价格"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="价格区间">
            <a-input
              v-model:value="query.im_price_end"
              placeholder="请输入终止价格"
            />
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="16">
        <a-col>
          <div class="input-group my-ctl" :gutter="16">
            <div class="input-group-prepend">
              <div class="input-group-text">进货日期区间查询</div>
            </div>
            <input
              type="date"
              class="form-control"
              style="width: 328px"
              v-model="query.im_day_start"
            />
            <div class="input-group-prepend input-group-append">
              <div class="input-group-text" style="text-align: center">至</div>
            </div>
            <input
              type="date"
              class="form-control"
              style="width: 328px"
              v-model="query.im_day_end"
            />
          </div>
        </a-col>

        <a-col>
          <div class="input-group my-ctl" :gutter="16">
            <div class="input-group-prepend">
              <div class="input-group-text">生产日期区间查询</div>
            </div>
            <input
              type="date"
              class="form-control"
              style="width: 328px"
              v-model="query.im_date_start"
            />
            <div class="input-group-prepend input-group-append">
              <div class="input-group-text" style="text-align: center">至</div>
            </div>
            <input
              type="date"
              class="form-control"
              style="width: 328px"
              v-model="query.im_date_end"
            />
          </div>
        </a-col>
      </a-row>
    </a-form>
    <div
      :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 1,
      }"
    >
      <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
      <a-button type="primary" @click="purchQuery">查询</a-button>
    </div>
  </a-drawer>
</template>
<script>
//引入ref函数，用于构造单向绑定数据
import { ref, reactive, computed, defineComponent } from "vue";

//引入useRouter函数，用于获取路由器对象
import { useRouter } from "vue-router";

//引入函数，用于向服务端发送get请求
import { get, put, del, post, getBlob, tip, removeLocalToken } from "@/common";

//引入antdvue插件
import { PlusOutlined } from "@ant-design/icons-vue";

export default defineComponent({
  setup() {
    const columns = [
      {
        title: "进货编号", //表头名称
        dataIndex: "im_id", //服务端数据
        align: "center",
        //slots定义插槽，即将开发者自定义的内容嵌入
        slots: {
          customRender: "id", //定义插槽名称，即以cusid为名插槽的数据插入该列位置
        },
      },
      {
        title: "货物编号",
        dataIndex: "ca_id",
        align: "center",
        slots: {
          customRender: "id", //定义插槽名称，即以sid为名插槽的数据插入该列位置
        },
      },
      {
        title: "供应商编号",
        dataIndex: "su_id",
        align: "center",
        slots: {
          customRender: "id", //定义插槽名称，即以sid为名插槽的数据插入该列位置
        },
      },

      {
        title: "供应商名称",
        dataIndex: "su_name",
        align: "center",
      },

      {
        title: "货物名称",
        dataIndex: "ca_name",
        align: "center",
      },

      {
        title: "数量",
        dataIndex: "im_num",
        align: "center",
      },
      {
        title: "进货日期",
        dataIndex: "im_day",
        align: "center",
      },
      {
        title: "进价",
        dataIndex: "im_price",
        align: "center",
        slots: {
          customRender: "unit", //定义插槽名称，即以unit为名插槽的数据插入该列位置
        },
      },
      {
        title: "生产日期",
        align: "center",
        dataIndex: "im_date",
      },

      {
        key: "action",
        title: "操作",
        align: "center",
        slots: {
          customRender: "action",
        },
      },
    ];

    //分页处理-start
    const query = reactive({
      im_id: "",
      ca_id: "",
      ca_name: "",
      su_id: "",
      su_name: "",
      ca_name: "",
      im_num: "",
      im_day: "",
      im_day_start: "",
      im_day_end: "",
      im_date: "",
      im_date_start: "",
      im_date_end: "",
      im_price: "",
      im_price_start: "",
      im_price_end: "",
    }); //定义查询参数

    const page = ref({}); //接收服务端返回的分页对象

    //分页引擎
    const pagination = reactive({
      current: 1, //当前页
      pageSize: 5, //每页记录数
      total: 0, //总记录数
      pageSizeOptions: ["5", "10", "20", "30", "100"], //每页记录下拉框的选型
      showSizeChanger: true, //是否展示每页记录数下拉框
      showQuickJumper: true, //是否展示快速跳转
      showTotal: (total, range) => {
        //展示总页数等文字说明信息的
        return (
          "共" +
          total +
          "条记录,当前第" +
          pagination.current +
          "页" +
          (range[1] - range[0] + 1) +
          "条记录"
        );
      },
    });

    //获取当前分页
    const getPage = (pageNum = 1) => {
      query.pageNum = pageNum;
      query.pageSize = pagination.pageSize;

      get("/stock/purchase", query).then((res) => {
        page.value = res.data; //将服务端传来的分页数据赋值予page

        //更新分页引擎
        pagination.current = page.value.current;
        pagination.pageSize = page.value.pageSize;
        pagination.total = page.value.total;
      });
    };
    getPage(1); //页面加载是，首先加载第一页

    //当分页发送变化时（如：页码、每页记录数变化时）
    const handleTableChange = (
      pagi,
      filters,
      sorter,
      { currentDataSource }
    ) => {
      pagination.current = pagi.current;
      pagination.pageSize = pagi.pageSize;
      pagination.total = pagi.total;

      getPage(pagination.current);
    };

    //分页处理-end

    //新增
    const addObj = reactive({
      im_id: "",
      ca_id: "",
      ca_name: "",
      su_id: "",
      su_name: "",
      im_num: "",
      im_day: "",
      im_price: "",
      im_date: "",
    });
    const visible = ref(false); //窗口是否显示
    //打开窗口
    const openAdd = () => {
      get("/stock/purchase/supplier").then((res) => {
        supplierMap.value = res.data;
      });

      get("/stock/purchase/cargo").then((res) => {
        cargoMap.value = res.data;
      });
      visible.value = true;
    };
    //执行新增
    const purchAdd = () => {
      checkdata.value
        .validate()
        .then(() => {
          post("/stock/purchase", addObj).then((res) => {
            addObj.im_id = ""; //清空窗口数据
            addObj.ca_id = ""; //清空窗口数据
            (addObj.ca_name = ""), (addObj.su_id = ""); //清空窗口数据
            addObj.su_name = ""; //清空窗口数据
            addObj.im_num = ""; //清空窗口数据
            addObj.im_day = ""; //清空窗口数据
            addObj.im_price = ""; //清空窗口数据
            addObj.im_date = ""; //清空窗口数据

            visible.value = false;
            tip.success("新增记录成功！");
            getPage(page.value.last + 1);
          });
        })
        .catch((error) => {
          tip.error("输入信息缺失或格式错误！");
        });
    };

    //修改
    const updObj = reactive({
      im_id: "",
      ca_id: "",
      ca_name: "",
      su_id: "",
      su_name: "",
      im_num: "",
      im_day: "",
      im_price: "",
      im_date: "",
    });
    const visible2 = ref(false);
    //打开窗口
    const openUpd = (pur) => {
      get("/stock/purchase/supplier").then((res) => {
        supplierMap.value = res.data;
      });
      get("/stock/purchase/cargo").then((res) => {
        cargoMap.value = res.data;
      });
      updObj.im_id = pur.im_id;
      updObj.ca_name = pur.ca_name;
      updObj.su_name = pur.su_name;
      updObj.im_num = parseFloat(pur.im_num);
      updObj.im_day = pur.im_day;
      updObj.im_price = pur.im_price;
      updObj.im_date = pur.im_date;

      visible2.value = true;
    };
    //执行修改
    const purchUpd = () => {
      put("/stock/purchase/", updObj).then((res) => {
        updObj.im_id = ""; //清空窗口数据
        updObj.ca_id = ""; //清空窗口数据
        updObj.su_id = ""; //清空窗口数据
        updObj.im_num = ""; //清空窗口数据
        updObj.im_day = ""; //清空窗口数据
        updObj.im_price = ""; //清空窗口数据
        updObj.im_date = ""; //清空窗口数据

        visible2.value = false;
        tip.success("修改记录成功！");

        getPage(page.value.current);
      });
    };

    //删除
    const purchDel = (im_id) => {
      del("/stock/purchase/" + im_id).then((res) => {
        tip.success("删除记录成功！");
        getPage(page.value.current);
      });
    };

    //查询
    const dateFormat = "YYYY-MM-DD";
    const visible3 = ref(false);

    const showDrawer = () => {
      get("/stock/purchase/supplier").then((res) => {
        supplierMap.value = res.data;
      });
      get("/stock/purchase/cargo").then((res) => {
        cargoMap.value = res.data;
      });
      visible3.value = true;
    };

    const onClose = () => {
      visible3.value = false;
    };
    //执行查询
    const purchQuery = () => {
      // get("/stock/purchase", query).then((res) => {
      visible3.value = false;
      tip.success("查询完成！");
      getPage();

      query.im_id = ""; //清空窗口数据
      query.ca_id = ""; //清空窗口数据
      query.su_id = ""; //清空窗口数据
      query.su_name = "";
      query.im_num = ""; //清空窗口数据
      query.im_day = ""; //清空窗口数据
      query.im_day_start = "";
      query.im_day_end = "";
      query.im_price = ""; //清空窗口数据
      query.im_price_start = "";
      query.im_price_end = "";
      query.im_date = ""; //清空窗口数据
      query.im_date_start = "";
      query.im_date_end = "";

      // });
    };

    const supplierMap = ref({});

    const cargoMap = ref({});

    const checkdata = ref();

    const rules = {
      ca_name: [
        {
          required: true,
          message: "请选择货物名称！",
          trigger: "blur",
        },
      ],
      su_name: [
        {
          required: true,
          message: "请选择供货商名称！",
          trigger: "blur",
        },
      ],
      im_num: [
        {
          required: true,
          message: "请输入货物数量！",
          trigger: "blur",
        },
      ],
      im_price: [
        {
          required: true,
          message: "请输入进价！",
          trigger: "blur",
        },
      ],
      im_day: [
        {
          required: true,
          message: "请选择进货日期！",
          trigger: "blur",
        },
      ],
      im_date: [
        {
          required: true,
          message: "请选择生产日期！",
          trigger: "blur",
        },
      ],
    };

    return {
      columns,
      query,
      page,
      pagination,
      getPage,
      handleTableChange,
      updObj,
      visible2,
      openUpd,
      purchUpd,
      purchDel,
      addObj,
      visible,
      openAdd,
      purchAdd,
      visible3,
      showDrawer,
      onClose,
      purchQuery,
      supplierMap,
      cargoMap,
      checkdata,
      rules,
    };
  },
});
</script>